<template>
  <div class="search">
    <!-- 导航栏 -->
    <van-nav-bar fixed title="搜索中心" :border="false">
      <template #left>
        <van-icon name="arrow-left" @click="$router.go(-1)" />
      </template>
    </van-nav-bar>
    <!-- /导航栏 -->

    <!-- 搜索组件 -->
    <van-search
      v-model.trim="keyword"
      show-action
      placeholder="请输入搜索关键词"
      @search="onSearch"
      shape="round"
      @input="searchSuggestion"
    >
      <template #action>
        <div @click="clickSearch">搜索</div>
      </template>
    </van-search>
    <!-- /搜索组件 -->

    <!-- 联想建议 v-if="keyword"-->
    <van-cell-group v-if="keyword">
      <van-cell
        icon="search"
        v-for="(v, i) in showSuggestion"
        :key="i"
        @click="clickSuggestion(i)"
      >
        <div v-html="v"></div>
      </van-cell>
    </van-cell-group>
    <!-- /联想建议 -->

    <!-- 搜索历史记录 v-else-->
    <van-cell-group v-else>
      <van-cell title="历史记录" v-show="history.length"></van-cell>
      <van-cell :title="v" v-for="(v, i) in history" :key="v" @click="clickHistory(v)">
        <van-icon name="close" @click.stop="delHistory(i)" />
      </van-cell>
    </van-cell-group>
    <!-- /搜索历史记录 -->
  </div>
</template>

<script>
import { getSuggestion } from '@/api/search'
import { setHistory, getHistory } from '@/utils/storage'
export default {
  name: 'Search',
  data() {
    return {
      keyword: '', // 搜索关键字
      suggestion: [], // 联想记忆的数组
      // history: ['美女', 'java', 'javascript', '手机'], // 搜索历史
      history: getHistory(),
      timeId: null,
    }
  },
  methods: {
    // 一、联想建议
    async searchSuggestion() {
      // 函数防抖
      clearTimeout(this.timeId)
      this.timeId = setTimeout(async () => {
        // 1.1 内容为空不发送请求
        if (this.keyword === '') return
        // 1.2 发送请求保存数据
        const { data } = await getSuggestion(this.keyword)
        // console.log(data)
        this.suggestion = data.data.options
      }, 500)
    },
    onSearch() {
      this.clickSearch('回车键触发')
    },

    // 二、点击搜索功能
    clickSearch() {
      // 2.1 非空校验后触发追加历史的方法
      if (!this.keyword) return
      this.addHistory(this.keyword)
      // 2.2 跳转到搜索结果页面
      this.$router.push('/searchResult/' + this.keyword)
    },

    // 三、点击联想推荐
    clickSuggestion(i) {
      // console.log('联想')
      this.addHistory(this.suggestion[i])
      // 2.1 跳转到搜索结果页面
      this.$router.push('/searchResult/' + this.suggestion[i])
    },

    // 四、追加历史的方法
    addHistory(str) {
      // console.log('追加历史', str)
      // 4.1 找到索引
      const i = this.history.findIndex(item => item === str)
      // console.log(i)
      // 4.2 如果找到,先截取重复的,找不到就直接添加到历史搜索中,并且只保留7条搜索历史
      if (i !== -1) this.history.splice(i, 1)
      this.history.unshift(str)
      if (this.history.length > 7) this.history.pop()
      // 4.3 保存到本地
      setHistory(this.history)
    },

    // 五、删除历史
    delHistory(i) {
      // console.log(i)
      this.history.splice(i, 1)
      setHistory(this.history)
    },

    // 六、点击历史记录
    clickHistory(v) {
      // 6.1 跳转页面,重新追加历史
      this.$router.push('/searchResult/' + v)
      this.addHistory(v)
    },
  },

  computed: {
    showSuggestion() {
      const regExp = new RegExp(this.keyword, 'gi')
      return this.suggestion.map(item => {
        return item.replace(regExp, match => `<span style="color:red;">${match}</span>`)
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.search {
  padding-top: 46px;
}
</style>
